<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市县三级联动</title>
    <style>
        select{
            width: 140px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-1.10.1.js"></script>
</head>
<body>

省:<select name="province" id="province">
    <option>--请选择省--</option>
</select>
市:<select name="city" id="city">
    <option>--请选择市--</option>
</select>
区:<select name="area" id="area">
    <option>--请选择区--</option>
</select>

<script>

    //页面加载完成，第一个下拉框需要有所有省份的数据
    $.ajax({
        url:"/downbox/province/showProvinces",
        dataType:"json",
        success:function(result){
            $("#province~option").remove();
            var list = result.list;
            $(list).each(function (i,obj) {
                var op = $("<option></option>");
                op.html(obj.name);
                op.val(obj.code);
                $("#province").append(op);
            })
        }
    })

    //第一个下拉框中省份值改变，将发送查询该省份下城市的ajax请求
    $("#province").change(function(){
        var id = $("#province").val();
        console.log("省份code"+id);
        $.ajax({
            url:'/downbox/city/showCitys',
            data:'provinceid='+id,
            success:function(result){
                //将查询结果渲染到第一个下拉框
                $("#city~option").remove();
                var list = result.list;
                $(list).each(function (i,obj) {
                    var op = $("<option></option>");
                    op.html(obj.name);
                    op.val(obj.code);
                    $("#city").append(op);
                })
            }
        })
    })
    //第二个下拉框中市份值改变，将发送查询该城市份下区县的ajax请求
    $("#city").change(function(){
        var id = $("#city").val();
        $.ajax({
            url:'/downbox/area/showAreas',
            data:'cityid='+id,
            success:function(result){
                //将查询结果渲染到第一个下拉框
                $("#area~option").remove();
                var list = result.list;
                $(list).each(function (i,obj) {
                    var op = $("<option></option>");
                    op.html(obj.name);
                    op.val(obj.code);
                    $("#area").append(op);
                })
            }
        })
    })

</script>

</body>
</html>









